<template>
  <div class="left-nav-container">
    <div class="logo cursor-pointer" @click="handleToHome">
      <n-avatar :src="LogoPng" round :size="48" />
    </div>
    <div class="nav-bar">
      <div class="menu-list">
        <!-- <div class="item active" @click="handleToHome">
          <SvgIcon icon="wenjianjia1" color="#cbd3f5" size="20px"></SvgIcon>
          <span class="mt-1">个人中心</span>
        </div> -->
      </div>
      <div class="user-info">
        <!-- <n-dropdown
          :show-arrow="true"
          trigger="click"
          :options="noticeOptions"
          placement="right"
          size="medium"
          :render-label="renderNoticeLabel"
          @select="handleSelectNotice"
        >
          <div class="notice cursor-pointer">
            <n-badge :show="warning !== 0" :value="warning">
              <SvgIcon
                icon="icon_notice"
                color="#cbd3f5"
                size="16px"
                @click="handleOpenNotice"
              ></SvgIcon>
            </n-badge>
          </div>
        </n-dropdown> -->

        <n-dropdown
          :show-arrow="true"
          placement="right"
          size="small"
          trigger="click"
          :options="options"
          @select="handleSelect"
          :render-label="renderLabel"
        >
          <div class="avator cursor-pointer">
            <n-avatar
              round
              :size="48"
              :src="renderAvatorSrc(userStore.userInfo?.avator as string)"
            />
          </div>
        </n-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/stores/modules/user'
import type { IndexObj } from '@/types/commom'
import { renderAvatorSrc, renderDropLabel } from '@/utils/commonBusiness'
import { useLogout } from '@/hooks/useLogout'
import LogoPng from '@/assets/images/d27617fcc5ac6a78d95ceaa80522a1f2.jpg'

const userStore = useUserStore()
const router = useRouter()

const { handleLogout } = useLogout()

const renderCustomHeader = () => {
  return h(
    'div',
    {
      class: 'hover:(bg-gray-100)',
      style:
        'display: flex; align-items: center; padding: 8px 12px;cursor: pointer;',
      onClick: () => {
        router.push({
          name: 'userSettings'
        })
      }
    },
    [
      h(NAvatar, {
        round: true,
        style: 'margin-right: 12px;',
        src: renderAvatorSrc(userStore.userInfo?.avator as string)
      }),
      h('div', null, [
        h('div', null, [
          h(
            NText,
            { depth: 2 },
            { default: () => userStore.userInfo?.role.name || '用户' }
          )
        ]),
        h('div', { style: 'font-size: 12px;' }, [
          h(
            NText,
            { depth: 3 },
            {
              default: () =>
                userStore.userInfo?.nickname ||
                userStore.userInfo?.username ||
                ''
            }
          )
        ])
      ])
    ]
  )
}

const baseOptions = [
  {
    key: 'header',
    type: 'render',
    render: renderCustomHeader
  },
  { key: 'user-account', label: '账号中心', myIcon: 'yonghu1' },
  {
    key: 'd1',
    type: 'divider'
  },
  {
    key: 'backend-manage',
    label: '后台管理',
    myIcon: 'statistics-filled',
    auth: ['admin']
  },
  {
    key: 'user-manage',
    label: '用户管理',
    myIcon: 'qunzu',
    auth: ['admin']
  },
  {
    key: 'd2',
    type: 'divider'
  },
  { key: 'user-logout', label: '退出', myIcon: 'tuichudenglu' }
]

// 根据用户的权限去过滤掉对应的下拉菜单
const options = computed<IndexObj[]>(() => {
  if (userStore.userInfo) {
    return baseOptions.filter((item) => {
      if (item.auth) {
        return userStore.userInfo!.role.Permissions.some((v: any) => {
          return item.auth.includes(v.ename)
        })
      } else {
        return true
      }
    })
  } else {
    return baseOptions.filter((item) => !item.auth)
  }
})

const handleSelect = (key: string) => {
  if (key === 'user-account') {
    router.push({
      name: 'userSettings'
    })
  } else if (key === 'source-manage') {
    router.push({
      name: 'explorer'
    })
  } else if (key === 'backend-manage') {
    router.push({
      path: '/admin/index'
    })
  } else if (key === 'user-manage') {
    router.push({
      path: '/admin/index'
    })
  } else if (key === 'user-logout') {
    handleLogout()
  }
}

const renderLabel = (option: IndexObj) => {
  return renderDropLabel(
    option.myIcon,
    option.label,
    '#888',
    undefined,
    '#b4b4b4'
  )
}

const handleToHome = () => {
  router.push('/')
}

onMounted(async () => {
  if (!userStore.userInfo) {
    await userStore.getUserInfo()
  }
})
</script>

<style scoped lang="scss">
.left-nav-container {
  min-width: 70px;
  width: 70px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(120deg, #1b6de1, #532a9d);
  background-color: #4f6bdf;
  background-image: linear-gradient(
    180deg,
    #143ad5 0,
    rgba(20, 58, 213, 0) 37%
  );

  .logo {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: rgba($color: #000000, $alpha: 0.1);
    color: #fff;
  }

  .nav-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .menu-list {
      padding: 5px;
      .item {
        cursor: pointer;
        border-radius: 5px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #fff;

        &.active {
          background-color: rgba(255, 255, 255, 0.25);
        }
      }
    }

    .user-info {
      padding-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .notice {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s;
      }

      .avator {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s;
      }

      .notice:hover,
      .avator:hover {
        background-color: rgba(255, 255, 255, 0.25);
      }
    }
  }
}
</style>
